<template >
	<view @click="goView(data.id)" class="list-item person-item">
		<view class="info-block">
			<image :src="data.user.faceUrl?data.user.faceUrl:imageUrl+'/job_hunting/home/Mr.png'"
				class="user-photo"></image>
			<view class="info">
				<view style="display: flex;">
					<view class="name">{{data.realName}}</view>
					<view style="margin-left: 10px;color: #fe7144;font-size: 12px;line-height: 48rpx;">{{data.loginTimeText}}</view>
				</view>
				
				<view class="others" style="display: flex;flex-direction: row;">
					<view class="other-item">{{data.birthday}}岁/</view>
					<view class="other-item" v-if="data.education"> {{data.education}} /
					</view>
					<view class="other-item" v-else> {{data.educationText}} /</view>
					<view class="other-item" v-if="data.workTimeStart=='0年'">
						经验小于1年 /
					</view>
					<view class="other-item" v-else>{{data.workTimeStart}}经验 / </view>
					<view class="other-item"> {{data.jobText}}</view>
				</view>
			</view>
		</view>
		<view class="job-block">
			<view class="job">
				<!-- <view class="label-block">
					<view v-for="(item1,index1) in data.label" class="label-item">{{item1}}</view>
				</view> -->
				<view class="job-content">
					<view class="jobList">
						<text class="darkgray" style="margin-right:10rpx;">想找</text>
						{{data.regArea}} / {{data.postName}} /
						{{data.salaryMin}}-{{data.salaryMax}}元
					</view>
				</view>
			</view>
			<!-- <view class="btn-block">
				<view class="btn">沟通</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "CustomerList",
		props: {
			data: Object
		},
		methods: {
				navigate(url)
				{
					uni.navigateTo({
						url: url
					})
				},
				goView(id) {
					uni.navigateTo({
						url: '/page_other/resume/index?type=view&id=' + id
					})
				},
		}
	}
</script>

<style lang="scss">
	.list-item {
		width: 100%;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 10px 0 #efefef;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 20rpx;

		.detail-info {
			width: 260rpx;
			//height: 200rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;

			.name {
				width: 110rpx;
				font-size: 24rpx;
				color: #999;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
				text-indent: 15rpx;
			}

			.photo {
				width: 70rpx;
				height: 70rpx;
				border-radius: 100%;
				background: #efefef;
			}

			.apply-btn {
				border: 1px solid #FE7526;
				border-radius: 8rpx;
				color: #FE7526;
				font-size: 24rpx;
				padding: 8rpx 28rpx;
				position: relative;
				left: 30rpx;
			}
		}

		.list-info {
			// width: calc(100% - 180rpx);
			width: 100%;
			display: flex;
			flex-direction: column;

			>view {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.title-info {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					color: #000;
					font-weight: bold;
					font-size: 34rpx;
				}

				.fast-job {
					width: 60rpx;
					height: 38rpx;
					border: 1rpx solid #FE7526;
					font-size: 24rpx;
					text-align: center;
					color: #FE7526;
					margin-left: 20rpx;
					border-radius: 6rpx;
				}
			}

			.detail-item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.money-item {
					margin-top: 20rpx;

					.wage {
						color: #FE7526;
						font-size: 36rpx;
						font-weight: bold;

						.unit {
							font-size: 28rpx;
							font-weight: normal;
						}
					}
				}

				.detail-info {
					width: 180rpx;
					// height: 200rpx;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;

					.name {
						width: 110rpx;
						font-size: 24rpx;
						color: #999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: center;
						text-indent: 15rpx;
					}

					.photo {
						width: 70rpx;
						height: 70rpx;
						border-radius: 100%;
						background: #efefef;
					}

					.apply-btn {
						border: 1px solid #FE7526;
						border-radius: 8rpx;
						color: #FE7526;
						font-size: 24rpx;
						padding: 8rpx 28rpx;
						position: relative;
						left: 30rpx;
					}
				}
			}

			.address-item {
				display: flex;
				justify-content: space-between;

				.address {
					width: 440rpx;
					color: #999;
					font-size: 26rpx;
					margin-top: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.distance {
					color: #999;
					font-size: 26rpx;
					margin-top: 20rpx;
				}
			}

			.label-block {
				font-size: 24rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: left;
				margin-top: 20rpx;

				.label-item {
					padding: 8rpx 20rpx;
					background: #F5F6F8;
					color: #999;
					margin: 0 10rpx 20rpx 0;
				}
			}

			.wage {
				color: #FE7526;
				font-size: 36rpx;
				font-weight: bold;

				.unit {
					font-size: 28rpx;
					font-weight: normal;
				}
			}
		}
	}
	.person-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	
		.info-block,
		.job-block {
			width: 100%;
			padding: 20rpx 0;
		}
	
		.info-block {
			border-bottom: 1px solid #efefef;
			display: flex;
			flex-direction: row;
			align-items: center;
	
			.user-photo {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
	
			.info {
				width: calc(100% - 120rpx);
				margin-left: 20rpx;
	
				.name {
					font-weight: bold;
					font-size: 34rpx;
				}
	
				.others {
					display: flex;
					flex-direction: row;
	
					.other-item {
						font-size: 26rpx;
						color: #999;
						margin-top: 14rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
	
			}
		}
	
		.job-block {
			display: flex;
			flex-direction: row;
			align-items: center;
	
			.job {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
	
				.label-block {
					width: 100%;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
	
					.label-item {
						background: #F4F5F7;
						color: #999;
						font-size: 24rpx;
						padding: 4rpx 10rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}
				}
	
				.job-content {
					width: 100%;
					font-size: 26rpx;
	
					.jobList {
						width: 100%;
					}
				}
			}
	
			.btn-block {
				width: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
	
				.btn {
					padding: 6rpx 26rpx;
					border: 1px solid #FE7526;
					border-radius: 6rpx;
					color: #FE7526;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
